<template>
  <!-- 登录容器 -->
  <div class="login-container">
    <!-- 登录左侧区域 -->
    <div class="login-left">
      <!-- logo内容区域 -->
      <div class="login-left-logo">
        <!-- <img src="/logo.jpg" /> -->
        <div class="login-left-logo-text">
          <span>后台管理系统</span>
        </div>
      </div>
      <!-- 左侧-图片区域 -->
      <div class="login-left-img">
        <img src="@/assets/login-main.svg" />
      </div>
      <!-- 左侧弧度 -->
      <img
        src="@/assets/login-bg.svg"
        class="login-left-waves"
        data-v-bf3f2623=""
      />
    </div>
    <!-- 登录右侧区域 -->
    <div class="login-right">
      <div class="login-right-warp">
        <span class="login-right-warp-one"></span
        ><span class="login-right-warp-two"></span>
        <div class="login-right-warp-mian">
          <div class="login-right-warp-main-title">Hi, 欢迎您！</div>
          <div class="login-right-warp-main-form">
            <el-tabs class="demo-tabs" model-value="login_by_username">
              <el-tab-pane label="手机号登录" name="login_by_username">
                <el-form ref="ruleFormRef" :rules="rules" :model="ruleForm">
                  <el-form-item prop="phone">
                    <el-input
                      type="text"
                      v-model="ruleForm.userName"
                      placeholder="用户手机号"
                      autocomplete="off"
                      prefix-icon="User"
                      clearable
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input
                      type="password"
                      v-model="ruleForm.passWord"
                      placeholder="用户密码"
                      autocomplete="off"
                      prefix-icon="Lock"
                      show-password
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      style="width: 100%"
                      type="primary"
                      :loading="isLoading"
                      @click="submitForm(formRef)"
                      >登录</el-button
                    >
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { userStore } from "@/stores/userInfo";
import { loginRequest } from "@/apis/login";

import { ElMessage } from "element-plus"; // 统一提醒
import { Md5 } from "ts-md5";

/**实例化路由**/
const router = useRouter();
/**用户信息仓库**/
const userInfo = userStore();

/**登录相关**/
const ruleFormRef = ref(null);
const ruleForm = reactive({
  userName: "",
  passWord: "",
});

const rules = reactive({
  userName: [{ required: "true", message: "账户不能为空", trigger: "blur" }],
  passWord: [{ required: "true", message: "密码不能为空", trigger: "blur" }],
});

// 提交loading
let isLoading = ref(false);
// 登录提交函数
const submitForm = () => {
  if (!ruleFormRef) return;
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      // 打开loding
      isLoading.value = true;
      // 请求登录接口
      const { data: userInfoRes } = await loginRequest(
        Object.assign({}, ruleForm, {
          passWord:'E10ADC3949BA59ABBE56E057F20F883E'|| Md5.hashStr(ruleForm.passWord),
        })
      );
      // 关闭loading
      isLoading.value = false;
      // 登录失败
      if (!userInfoRes) return;
      // 存储用户信息
      userInfo.$state = userInfoRes;
      // 跳转首页
      router.push("/");
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>

<style lang="less" scoped>
.login {
  &-container {
    width: 100%;
    height: 100%;
    background: var(--el-color-white);
    display: flex;
  }
  &-left {
    flex: 1;
    position: relative;
    background-color: #d3efff;
    margin-right: 100px;
    &-logo {
      display: flex;
      align-items: center;
      position: absolute;
      top: 50px;
      left: 80px;
      z-index: 1;
      animation: logoAnimation 0.3s ease;
      img {
        width: 52px;
        height: 52px;
      }
      &-text {
        display: flex;
        flex-direction: column;
        span {
          margin-left: 10px;
          font-size: 28px;
          color: #26a59a;
        }
        &-msg {
          font-size: 12px !important;
          color: #32a99e !important;
        }
      }
    }
    &-img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 52%;
      img {
        width: 100%;
        height: 100%;
        animation: error-num 0.6s ease;
      }
    }
    &-waves {
      position: absolute;
      top: 0;
      right: -100px;
    }
  }
  &-right {
    width: 700px;
    display: flex;
    &-warp {
      border: 1px solid var(--el-color-primary-light-3);
      border-radius: 3px;
      width: 500px;
      height: 500px;
      margin: auto;
      position: relative;
      overflow: hidden;
      background-color: var(--el-color-white);
      &-one {
        position: absolute;
        display: block;
        width: inherit;
        height: inherit;
        &::before {
          content: "";
          position: absolute;
          z-index: 1;
          filter: hue-rotate(0deg);
          top: 0px;
          left: 0;
          width: 100%;
          height: 3px;
          background: linear-gradient(
            90deg,
            transparent,
            var(--el-color-primary)
          );
          animation: loginLeft 3s linear infinite;
        }
        &::after {
          content: "";
          position: absolute;
          z-index: 1;
          filter: hue-rotate(60deg);
          top: -100%;
          right: 0px;
          width: 3px;
          height: 100%;
          background: linear-gradient(
            180deg,
            transparent,
            var(--el-color-primary)
          );
          animation: loginTop 3s linear infinite;
          animation-delay: 0.7s;
        }
      }
      &-two {
        position: absolute;
        display: block;
        width: inherit;
        height: inherit;
        &::before {
          content: "";
          position: absolute;
          z-index: 1;
          filter: hue-rotate(120deg);
          bottom: 0px;
          right: -100%;
          width: 100%;
          height: 3px;
          background: linear-gradient(
            270deg,
            transparent,
            var(--el-color-primary)
          );
          animation: loginRight 3s linear infinite;
          animation-delay: 1.4s;
        }
        &::after {
          content: "";
          position: absolute;
          z-index: 1;
          filter: hue-rotate(300deg);
          bottom: -100%;
          left: 0px;
          width: 3px;
          height: 100%;
          background: linear-gradient(
            360deg,
            transparent,
            var(--el-color-primary)
          );
          animation: loginBottom 3s linear infinite;
          animation-delay: 2.1s;
        }
      }
      &-main {
        display: flex;
        flex-direction: column;
        height: 100%;
        &-title {
          height: 130px;
          line-height: 130px;
          font-size: 27px;
          text-align: center;
          letter-spacing: 3px;
          animation: logoAnimation 0.3s ease;
          animation-delay: 0.3s;
        }
        &-form {
          flex: 1;
          padding: 0 50px 50px;
          .el-form {
            margin-top: 20px;
            .el-input__icon {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
// 登录页动画
@keyframes logoAnimation {
  0% {
    transform: scale(0);
  }

  80% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes loginLeft {
  0% {
    left: -100%;
  }

  50%,
  100% {
    left: 100%;
  }
}

@keyframes loginTop {
  0% {
    top: -100%;
  }

  50%,
  100% {
    top: 100%;
  }
}

@keyframes loginRight {
  0% {
    right: -100%;
  }

  50%,
  100% {
    right: 100%;
  }
}

@keyframes loginBottom {
  0% {
    bottom: -100%;
  }

  50%,
  100% {
    bottom: 100%;
  }
}
// 媒体查询
@media screen and (max-width: 1200px) and (min-width: 576px) {
  .login-container .login-left .login-left-img {
    top: 90% !important;
    left: 12% !important;
    width: 30% !important;
    height: 18% !important;
  }

  .login-container .login-right {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media screen and (max-width: 576px) {
  .login-container .login-left {
    display: none;
  }

  .login-container .login-right {
    width: 100% !important;
  }

  .login-container .login-right .login-right-warp {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
  }

  .login-container
    .login-right
    .login-right-warp
    .login-right-warp-mian
    .el-form-item {
    display: flex !important;
  }

  .login-container
    .login-right
    .login-right-warp
    .login-right-warp-mian
    .login-right-warp-main-title {
    font-size: 20px !important;
  }

  .login-container .login-right .login-right-warp .login-right-warp-one:after {
    right: 0 !important;
  }

  .login-container .login-right .login-right-warp .login-right-warp-two:before {
    bottom: 1px !important;
  }
}

@media screen and (max-width: 376px) {
  .login-container
    .login-right
    .login-right-warp
    .login-right-warp-mian
    .login-right-warp-main-title {
    font-size: 18px !important;
  }
}
</style>
